<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当当网</title>
</head>
<style>
    .container {
        width: 60%;
        height: 800px;
        margin: 20px auto;
        position: relative;
    }

    .logo {
        float: left;
    }

    .rightTopList {
        z-index: 0;
        position: relative;
        float: right;
        height: 40px;
        margin-top: 20px;
        border: 1px solid #eee9e9;
        padding: 0;
        margin-right: 0;
    }

    .rightTopList ul {
        z-index: 0;
        padding: 0;
        margin-top: 0;
    }

    .rightTopList ul li {
        z-index: 0;
        list-style: none;
        width: 70px;
        font-size: 15px;
        float: left;
        text-align: center;
        color: grey;
        line-height: 40px;
        background: #f4f4f4;
        position: relative;
    }

    .discount {
        position: relative;
        right: -1110px;
        top: 31px;
        z-index: 10;

    }

    .nav {
        height: 40px;
        padding-top: 40px;

    }

    .nav ul {
        padding: 0;
        margin-top: 40px;
        width: 100%;
    }
    .nav ul li {
        list-style: none;
        font-size: 15px;
        width: 5.88%;
        float: left;
        text-align: center;
        color: #fff;
        line-height: 40px;
        background: #ff7f50;
        position: relative;
    }

    .midPic {
        margin-top: 60px;
    }

    .mainBody {
        height: 500px;
        margin-top: 20px;
        border: 1px solid #b4eeb4;
        position: relative;
        z-index: 0;
    }

    .bang {
        position: relative;
        z-index: 10;
        top: 20px;
        left: -15px;+
    }

    .books {
        margin-top: 10px;
    }

    .book1 {
        height: 400px;
        margin-top: 50px;
        position: relative;
    }

    .right {
        float: right;
        width: 500px;
        margin-top: -400px;

    }
    .book2 {

    }

    .info1 {
        margin-top: -350px;
        margin-left: 400px;
        width: 380px;
    }

    .info2 {
        margin-top: -170px;
        margin-left: 0;
        width: 400px;
    }

    .info3 {
        margin-top: -180px;
        margin-left: 0;
        width: 400px;
    }

    .title {
        font-size: 20px;
        color: #a020f0;
    }
</style>
<body>
    <div class="container">
        <div class="logo">
            <img src="./img/logo.jpg" alt="" style="height: 70px">
        </div>

        <div class="rightTop">
            <div class="discount">
                <img src="./img/icon_count.png" alt="" style="height: 20px;">
            </div>
            <div class="rightTopList">
                <ul>
                    <li>尾品汇</li>
                    <li>当当优品</li>
                    <li>数字馆</li>
                    <li>都看阅器</li>
                </ul>
            </div>

        </div>
        <div class="nav">
            <ul>
                <li>首页</li>
                <li>图书</li>
                <li>音像</li>
                <li>童装</li>
                <li>服装</li>
                <li>鞋靴</li>
                <li>运动</li>
                <li>箱包</li>
                <li>美妆</li>
                <li>珠宝</li>
                <li>家居</li>
                <li>食品</li>
                <li>酒</li>
                <li>手机</li>
                <li>数码</li>
                <li>电脑</li>
                <li>家电</li>
            </ul>
        </div>
        <div class="midPic">
            <img src="./img/banner.png" alt="" style="width: 100%;">
        </div>
        <div class="mainBody">
            <div class="bang">
                <img src="./img/bg_bang.gif" alt="" style="height: 50px">
            </div>
            <div class="books">
                <div class="book1">
                    <img src="./img/bookNo1.gif" alt="" style="position: relative; z-index: 10; top: -300px; left: 40px; width: 32px">
                    <img src="./img/book-01.jpg" alt="" style="height: 350px; margin-left: -30px;">
                    <div class="info1">
                        <p class="title">偷影子的人</p>
                        <p>作者：[法] 马克·李维（Marc Levy）著</p>
                        <p>出版社：湖南文艺出版社</p>
                        <p>当当价：<span style="color: #a52a2a; font-weight: bold">￥17.90</span></p>
                        <p style="line-height: 30px">不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”</p>
                    </div>
                </div>
                <div class="right">
                    <div class="book2">
                        <img src="./img/bookNo2.gif" alt="" style="position: relative; z-index: 10; top: -120px; left: -154px; width: 32px">
                        <img src="./img/book-02.jpg" alt="" style="height: 150px; margin-left: -200px;">
                        <div class="info2">
                            <p class="title">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</p>
                            <p>作者：柴静&nbsp;&nbsp;著</p>
                            <p>出版社：广西师范大学出版社</p>
                            <p><span style="color: #a52a2a; font-weight: bold">￥17.90</span><span style="color: #d9d9d9; margin-left: 20px;">7.4折</span></p>
                        </div>
                    </div>
                    <div class="book3">
                        <img src="./img/bookNo3.gif" alt="" style="position: relative; z-index: 10; top: -120px; left: -154px; width: 32px">
                        <img src="./img/book-03.jpg" alt="" style="height: 150px; margin-left: -195px;">
                        <div class="info3">
                            <p class="title">改变孩子先改变自己</p>
                            <p>作者：贾容韬&nbsp;贾毅&nbsp;著</p>
                            <p>出版社：作家出版社</p>
                            <p><span style="color: #a52a2a; font-weight: bold">￥22.20</span><span style="color: #d9d9d9; margin-left: 20px;">7.4折</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>